<template>
	<div class="mall_goods_detail" :style="goodsPic">
		<GoodsDetailNav :title="goods().title" />
		<div class="mall_goods_detail_pic">
			<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="goods().pic" />
		</div>
		<div class="mall_goods_detail_content">
			<p><span class="mall_goods_detail_content_price"><del>￥{{goods().originalPrice}}</del>￥<i>{{goods().price}}</i></span></p>
			<h1 class="mall_goods_detail_content_title"><span>{{goods().tags}}</span>{{goods().title}}</h1>
		</div>
		<div class="mall_goods_detail_arguments">
			<a @click="showGoodsArgsDialog($event)" class="mall_goods_detail_arguments_button">
				<span>{{args.title}} {{args.desc}}</span>
				<span class="icon--"></span>
			</a>
		</div>
		<MallGoodsComment :id="goods().id" :cid="goods().cid" />
		<MallGoodsDetailShops :shops="shops()"/>
		<MallGoodsComplex :shopid="goods().shopid" :id="goods().id" :cid="goods().cid" />
		<div class="mall_goods_detail_line">-- 商品详情 --</div>
		<MallGoodsRecommend :shopid="goods().shopid" />
		<MallGoodsPics :id="goods().id" :cid="goods().cid" :shopid="goods().shopid" />
		<MallGoodsPriceStatement />
		<MallGoodsDetailTools :id="goods().id" :cid="goods().cid" :shopid="goods().shopid" />
		<Dialog :type="dialog.type" :mallGoodsInfo="dialog.mallGoodsInfo" :isShow="dialog.isShow" @showMallGoodsDialogHandle="showMallGoodsDialogHandle" />
	</div>
</template>
<script>
	export default{
		name: "MallGoodsDetail",
		data:function(){
			return{
				dialog:{
					type: "",
					isShow:false,
					showMallGoodsDialogHandle:[]
				},
				goods: () => {
					let goods = {},
						that = this;
					that.$store.state.goods.each((i, item) => {
						if (item.id === parseFloat(that.$route.params.id)){
							extend(goods, item);
							return false;
						}
					});
					return goods;
				},
				shops: () => {
					let shops = {},
						that = this;
					that.$store.state.shops.each((i, item) => {
						if (item.goodsids.indexOf(parseFloat(that.$route.params.id)) > -1){
							extend(shops, item);
							return false;
						}
					});
					return shops;
				},
				goodsPic:"",
				args:{
					title:"参数: ",
					desc:"品牌型号..."
				}
			}
		},
		methods:{
			showGoodsArgsDialog(e){
				this.$set(this, "dialog", {
					type: "mallGoodsInfoDownDialog",
					isShow: true,
					mallGoodsInfo: [{
						name: "品牌",
						value: "淘宝心选"
					},{
						name: "品牌",
						value: "淘宝心选"
					},{
						name: "品牌",
						value: "淘宝心选"
					},{
						name: "品牌",
						value: "淘宝心选"
					},{
						name: "品牌",
						value: "淘宝心选"
					}]
				});
			},
			showMallGoodsDialogHandle(args){
				this.$set(this, "dialog", extend(this.dialog, {
					isShow: args
				}));
			}
		},
		mounted: function(){
			window.scrollTo(1,1)
		},
		created: function(){
			this.$emit("upLocalData", [{
				name: "type",
				value: "mallGoodsDetail"
			},{
				name: "channelName",
				value: this.$route.meta.title
			}]);
		},
		components:{
			LazyImg: r => require.ensure([], () => r(require('../../components/common/lazy-img')), 'LazyImg'),
			GoodsDetailNav: r => require.ensure([], () => r(require('../../components/mall/mall-goods-detail-nav')), 'GoodsDetailNav'),
			MallGoodsComment: r => require.ensure([], () => r(require('../../components/mall/mall-goods-comment')), 'MallGoodsComment'),
			MallGoodsDetailShops: r => require.ensure([], () => r(require('../../components/mall/mall-goods-detail-shops')), 'MallGoodsDetailShops'),
			MallGoodsComplex: r => require.ensure([], () => r(require('../../components/mall/mall-goods-complex')), 'MallGoodsComplex'),
			MallGoodsRecommend: r => require.ensure([], () => r(require('../../components/mall/mall-goods-recommend')), 'MallGoodsRecommend'),
			MallGoodsPics: r => require.ensure([], () => r(require('../../components/mall/mall-goods-pics')), 'MallGoodsPics'),
			MallGoodsPriceStatement: r => require.ensure([], () => r(require('../../components/mall/mall-goods-price-statement')), 'MallGoodsPriceStatement'),
			MallGoodsDetailTools: r => require.ensure([], () => r(require('../../components/mall/mall-goods-detail-tools')), 'MallGoodsDetailTools'),
			Dialog: r => require.ensure([], () => r(require('../../components/common/dialog')), "Dialog")
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.mall_goods_detail{
		padding:0 0 80/@base 0;
		.mall_goods_detail_line{
			padding:10/@base 0;
			text-align: center;
			font-size: 22/@base;
			margin:10/@base 0 0;
		}
		.mall_goods_detail_pic{
			height:550/@base;
			overflow: hidden;
			span{
				display: block;
				img{
					width:100%;
				}
			}
		}
		.mall_goods_detail_content{
			background-color: #fff;
			padding:10/@base 20/@base 20/@base;
			h1{
				&.mall_goods_detail_content_title{
					font-size:24/@base;
					font-weight: 400;
					span{
						background-color: rgb(205, 163, 177);
						color:#fff;
						padding:0 5/@base;
						font-size: 20/@base;
						margin-right:10/@base;
					}
				}
			}
			p{
				span{
					&.mall_goods_detail_content_price{
						del{
							color:#ccc;
							margin-right:10/@base;
							font-size: 20/@base;
						}
						color:rgb(255, 0, 0);
						font-size:24/@base;
						i{
							font-weight: 700;
							font-size:40/@base;
							font-style: normal;
						}
					}
				}
			}
		}
		.mall_goods_detail_arguments{
			background-color: #fff;
			margin:10/@base 0 0;
			padding:10/@base 20/@base;
			a{
				&.mall_goods_detail_arguments_button{
					display: flex;
					span{
						display:block;
						color:#666;
						width:90%;
						font-size: 20/@base;
						line-height: 30/@base;
						text-align: left;
						&:last-child{
							width:10%;
							text-align: right;
							font-size: 16/@base;
						}
					}
				}
			}
		}
	}
</style>